<template>
    <div class="box" >
<div class="list" v-for="item in order">
    <div style="margin: auto;margin-top: 10px;margin-bottom: 10px;">
    <div>
        id:{{ item.id }}
    </div>
   用户：{{ item.user }}
   <div>
    下单时间：{{ item.starttime}}
   </div>
   <div>
    送达地址：{{ item.ddaddress }}
   </div>
   订单内容：
   <div v-for="res in item.order">
    商品名称：{{ res.name }}  数量：{{ res.num }}
   </div>
</div>
<div v-if="item.status!='已完成'"  class="btn">
    <div style=" color: brown;">
        等待商家配送中……
    </div>
    <el-button style=" margin-top: 10%;" type="success"  class="btn" round @click="flash">刷新订单</el-button>
</div>
<div v-else class="btn"> 订单已完成</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { finishOrder, getOrder, getUserOrder } from '@/api/Order';
import { storeA } from '@/piniaStore/storeA'
import { ElMessage } from 'element-plus';
import { ref,defineProps } from 'vue';
const props = defineProps(['order'])
const emit = defineEmits(['flash'])
const piniaStore = storeA()
// var order:any = ref({})
// async function fn(){
//    order.value = await getUserOrder()
//    console.log(order.value)
// }
// fn()
//刷新事件（已废）
// function flashOrder(){
//     setTimeout(() => {
//         ElMessage({
//                message: '刷新成功！',
//                type: 'success',
//              })
//     }, 2000);
// }
function flash(){
//传递事件
emit('flash', {
        
    })
}
</script>
<style scoped>
.box{
    display: flex;
    flex-flow:row wrap;
    width:100%;
}
.list{
    height: 350px;
    border-radius: 10px;
    width: 40%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background-color: rgb(239, 247, 191);
    margin: 10px;
}
.btn{
    width: 50%;
    margin: auto;
}
</style>